<template>
  <div class="page-header-index-wide">
<!--start-->
    <div class="root">
      <div class="rootLeft leftBg">
        <div class="hudai_box">
          <h3>户贷户用</h3>
          <div id="bar-line" class="bar-line" style="display: none;"></div>
          <div id="hudai" class="hudai">
            <div id="hudai_map" class="hudai"></div>
          </div>
        </div>
        <div class="hudai_notice">
          <h4>贫困户申请贷款公示</h4>
          <p>推荐给银行和担保公司<span @click="pinKunHuTuiJianDaiKuan">000</span>户</p>
          <p>获得贷款<span @click="pinKunHuHuoDeDaiKuan">000</span>户 获得金额<span>000</span>元</p>
        </div>
        <div class="hudai_notice">
          <h4>贫困户申请贷款公示</h4>
          <p>推荐给银行和担保公司<span @click="daiPinQiYe">000</span>户</p>
          <p>获得贷款<span>000</span>户 获得金额<span>000</span>元</p>
        </div>
        <div class="jinrongfuwu">
          <h3>金融服务信贷</h3>
          <div id="xindaifuwu" class="xindaifuwu">
            <div id="xindaifuwu" class="xindaifuwu"></div>
          </div>
        </div>
        <div class="xingyongtixi">
          <h3>信用体系建设</h3>
          <div id="xinyong" class="xinyong"></div>
        </div>
      </div>
      <div class="rootMiddle">
        <div class="head"><a href="http://192.168.1.221:3000/jingzhun/financialservices/ServiceCenterList"><img src="../../assets/images/header_bg.png" alt=""></a></div>
        <div class="map">
          <div class="countryMap" id="countryMapAll">
            <img src="../../assets/images/map.png" alt="">
          </div>
        </div>
        <div class="info">
          <h3>桐柏县扶贫工作概述</h3>
          <div class="fupinchengji">
            <h5>证监会与郑商所扶贫成绩</h5>
          </div>
          <div class="info_bg">
            <p>桐柏县总面积1915平方公里，辖<span>13</span>镇<span>3</span>乡<span>2</span>个产业集聚区、215个行政村（社区），截止2019年7月15日,全县建档立卡系统共有贫困村<span>87</span>个（其中深度贫困村<span>31</span>个）。其中：已脱贫贫困村<span>64</span>个（其中深度贫困村<span>16</span>个），未脱贫贫困村<span>23</span>个（其中深度贫困村<span>15</span>个），贫困发生率3.5%。未脱贫人口中，因病因残疾品占比69.13%，是主要致贫原因。
            </p>
          </div>
          <div class="btn_box">
            <span>城郊乡</span>
            <span>月河镇</span>
            <span>吴城镇</span>
            <span>固县镇</span>
            <span>程湾镇</span>
            <span>平氏镇</span>
            <span>毛集镇</span>
            <span>回龙乡</span>
            <span>黄冈镇</span>
            <span>朱庄镇</span>
            <span>埠江镇</span>
            <span>产业集聚区</span>
            <span>大河镇</span>
            <span>淮源镇</span>
            <span>新集乡</span>
            <span>安棚镇</span>
            <span>安棚化工园区</span>
            <span>扶贫中心</span>
          </div>
        </div>
      </div>
      <!-- 中间End -->
      <div class="rootRight rightBg">
        <div class="canye_box">
          <h3>产业支撑</h3>
          <div class="canye_bg">
            <div class="btn">
                <div class="navlist">
                    <span>种植业</span>
                    <span>养殖业</span>
                    <span>加工业</span>
                    <span>工业</span>
                    <span>第三产业</span>
                </div>
                <div class="contlist">
                    <span>茶叶</span>
                    <span>香菇</span>
                    <span>林果</span>
                    <span>香蕉</span>
                    <span>香蕉</span>
                    <span>香蕉</span>
                    <span>香蕉</span>
                </div>
            </div>
            <div class="cont">
              <p>桐柏县目前有<span>80</span>多个村两万余农户从事茶叶生产，全县优质茶园达<span>11</span>万亩，其中开采面积<span>6</span>万余亩，年产干茶<span>1860</span>余吨。</p>
            </div>
          </div>
        </div>
        <div class="hezuoshe">
          <h3>扶贫企业·合作社</h3>
          <div class="hezuosheMap">
            <span @click="juXinHeZuoShe">聚心合作社</span>
            <span @click="juLiHeZuoShe">聚力合作社</span>
            <span @click="qiTaHeZuoShe">其他合作社</span>
            <span @click="fuPinGuanLiGongSi">扶贫公司管理</span>
          </div>
          <div class="hezuosheNumMap">
            <div class="hezuosheNum_bg">精准扶贫带贫企业(合作社）共 <span @click="daiPinQiYe">78</span> 个</div>
          </div>
        </div>
        <div class="fengxianjin">
          <h3>风险金使用情况</h3>
          <div id="fengxianjinMap" class="fengxianjinMap"></div>
        </div>
      </div>
    </div>
    <!-- 贫困户和干部照片预览Start -->
    <div class="popup"></div>
    <div class="show"></div>
    <!-- 贫困户和干部照片预览End -->
<!--end-->
    <!--创建一个echarts的容器-->
    <div id="echartContainer" style="width:500px; height:500px"></div>
<!--    <RevenueDetailsListModal ref="revenueDetailsListModal"></RevenueDetailsListModal>-->
    <CooperativeListJuXinModal ref="cooperativeListJuXinModal"></CooperativeListJuXinModal>
    <CooperativeListJuLiModal ref="cooperativeListJuLiModal"></CooperativeListJuLiModal>
    <CooperativeListQiTaModal ref="cooperativeListQiTaModal"></CooperativeListQiTaModal>
    <CooperativeListFuPinGongSiModal ref="cooperativeListFuPinGongSiModal"></CooperativeListFuPinGongSiModal>
    <LoanRecommendationWithPoorEnterprisesListModal ref="loanRecommendationWithPoorEnterprisesListModal"></LoanRecommendationWithPoorEnterprisesListModal>
    <SmallLoanAccountListModal ref="smallLoanAccountListModal"></SmallLoanAccountListModal>
    <SmallRecommendationAccountListModal ref="smallRecommendationAccountListModal"></SmallRecommendationAccountListModal>
  </div>
</template>
<style  src="@/assets/style/liMarquee.css" ></style>
<style  src="@/assets/style/swiper.min.css" ></style>
<style  src="@/assets/style/index.css" ></style>
<script>
  import ChartCard from '@/components/ChartCard'
  import ACol from "ant-design-vue/es/grid/Col"
  import ATooltip from "ant-design-vue/es/tooltip/Tooltip"
  import MiniArea from '@/components/chart/MiniArea'
  import MiniBar from '@/components/chart/MiniBar'
  import MiniProgress from '@/components/chart/MiniProgress'
  import RankList from '@/components/chart/RankList'
  import Bar from '@/components/chart/Bar'
  import LineChartMultid from '@/components/chart/LineChartMultid'
  import HeadInfo from '@/components/tools/HeadInfo.vue'
  import Trend from '@/components/Trend'
  import { getLoginfo,getVisitInfo } from '@/api/api'
  import ImagPreview from "../jeecg/ImagPreview";
  import TabLayout from "../../components/layouts/TabLayout";
  import RevenueDetailsListModal from "@/views/jingzhun/daping/RevenueDetailsListModal";
  import CooperativeListJuXinModal from "../jingzhun/daping/CooperativeListJuXinModal";
  import CooperativeListJuLiModal from "../jingzhun/daping/CooperativeListJuLiModal";
  import CooperativeListQiTaModal from "../jingzhun/daping/CooperativeListQiTaModal";
  import CooperativeListFuPinGongSiModal from "../jingzhun/daping/CooperativeListFupinGongSiModal";
  import JDictSelectTag from '@/components/dict/JDictSelectTag.vue'
  import LoanRecommendationWithPoorEnterprisesListModal from "../jingzhun/daping/LoanRecommendationWithPoorEnterprisesListModal";
  import { deleteAction, getAction,downFile } from '@/api/manage';
  import $ from 'jquery';
import {drawLine} from "../../assets/js/sayMsg";
import {index2} from "../../assets/js/index";
  import SmallRecommendationAccountListModal from "../jingzhun/daping/SmallRecommendationAccountListModal";
  import SmallLoanAccountListModal from "../jingzhun/daping/SmallLoanAccountListModal";
  export default {
    name: "Analysis",
    components: {
        SmallLoanAccountListModal,
        SmallRecommendationAccountListModal,
        LoanRecommendationWithPoorEnterprisesListModal,
        CooperativeListFuPinGongSiModal,
        CooperativeListQiTaModal,
        CooperativeListJuLiModal,
        CooperativeListJuXinModal,
        RevenueDetailsListModal,
        TabLayout,
        ImagPreview,
      ATooltip,
      ACol,
      ChartCard,
      MiniArea,
      MiniBar,
      MiniProgress,
      RankList,
      Bar,
      Trend,
      LineChartMultid,
      HeadInfo
    },
    data() {
      return {
        loading: true,
        center: null,
        rankList:[],
        barData,
        loginfo:{},
        visitFields:['ip','visit'],
        visitInfo:[],
        indicator: <a-icon type="loading" style="font-size: 24px" spin />
      }
    },
      mounted(){
          this.$nextTick(() => {
              // drawLine();
              index2();
          });
      },
    created() {
      setTimeout(() => {
        this.loading = !this.loading
      }, 1000)
      this.initLogInfo();
    },
    methods: {
        fengXianJin: function () {
            getAction("/common/daping/fengxianjin", "").then((res) => {
                if (res.success) {
                    console.log(JSON.stringify(res.result));
                    alert(JSON.stringify(res.result));
                }
                if(res.code===500){
                    this.$message.warning(res.message)
                }
                this.loading = false;
            })
        },
        juXinHeZuoShe(record){
            this.$refs.cooperativeListJuXinModal.showGoodsGallery1(record);
        },
        juLiHeZuoShe(record){
            this.$refs.cooperativeListJuLiModal.showGoodsGallery1(record);
        },
        qiTaHeZuoShe(record){
            this.$refs.cooperativeListQiTaModal.showGoodsGallery1(record);
        },
        fuPinGuanLiGongSi(record){
            this.$refs.cooperativeListFuPinGongSiModal.showGoodsGallery1(record);
        },
        daiPinQiYe(record){
            this.$refs.loanRecommendationWithPoorEnterprisesListModal.showGoodsGallery1(record);
        },
        pinKunHuTuiJianDaiKuan(record){
            this.$refs.smallRecommendationAccountListModal.showGoodsGallery1(record);
        },
        pinKunHuHuoDeDaiKuan(record){
            this.$refs.smallLoanAccountListModal.showGoodsGallery1(record);
        },

      initLogInfo () {
        getLoginfo(null).then((res)=>{
          if(res.success){
            Object.keys(res.result).forEach(key=>{
              res.result[key] =res.result[key]+""
            })
            this.loginfo = res.result;
          }
        })
        getVisitInfo().then(res=>{
          if(res.success){
             this.visitInfo = res.result;
           }
         })
      },
    }
  }
</script>

<style lang="scss" scoped>
  .circle-cust{
    position: relative;
    top: 28px;
    left: -100%;
  }
  .extra-wrapper {
    line-height: 55px;
    padding-right: 24px;

    .extra-item {
      display: inline-block;
      margin-right: 24px;

      a {
        margin-left: 24px;
      }
    }
  }

  /* 首页访问量统计 */
  .head-info {
    position: relative;
    text-align: left;
    padding: 0 32px 0 0;
    min-width: 125px;

    &.center {
      text-align: center;
      padding: 0 32px;
    }

    span {
      color: rgba(0, 0, 0, .45);
      display: inline-block;
      font-size: .95rem;
      line-height: 42px;
      margin-bottom: 4px;
    }
    p {
      line-height: 42px;
      margin: 0;
      a {
        font-weight: 600;
        font-size: 1rem;
      }
    }
  }
</style>